<template>
  <view  class="goods_list_item" @click="gotoDetailPage">
    <!-- 左边图片 -->
    <view class="item_left_box">
      <radio v-if="showRadio" :checked="item.goods_state" color="#C00000" @click.stop="radioChangeHandler"></radio>
      <image :src="item.goods_small_logo || defaultUrl" mode=""></image>
    </view>
    <!-- 右边商品 -->
    <view class="item_right_box">
      <view class="item_name">
        {{item.goods_name}}
      </view>
      <view class="item_price_count">
        <text>￥{{item.goods_price | newPrice}}</text>
        <uni-number-box  v-if="showNumberBox" :min="1" :value="item.goods_count"  @change="NumberChange"></uni-number-box>
      </view>
    </view>
  </view>  
</template>

<script>
  export default {
    name:"my-goods",
    props: {
      item: {
        type:Object,
        default:{}
      },
      showRadio: {
        type:Boolean,
        default:false
      },
      showNumberBox: {
        type:Boolean,
        default:false
      }
    },
    filters: {
      newPrice(value) {
        return Number(value).toFixed(2)
      }
    },
    data() {
      return {
        defaultUrl: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
      };
    },
    methods: {
      gotoDetailPage() {
        uni.navigateTo({
          url:'/subpackages/goods_detail/goods_detail?goods_id=' + this.item.goods_id
        })
      },
      // 监听数量变化
      NumberChange(val) {
        // console.log(val)
        this.$emit('num-change',{
          
          goods_id: this.item.goods_id,
          goods_count: +val
        })
      },
      // radio点击事件
      radioChangeHandler() {
        this.$emit('radion-cahnge',{
          goods_id:this.item.goods_id,
          goods_state: !this.item.goods_state
        })
      },
    }
  }
</script>

<style lang="scss">
.goods_list_item {
    display: flex;
    padding: 10px 5px;
    
    border-bottom: 1px solid #efefef;
    .item_left_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      image {
        width: 100px;
        height: 100px;
        display: block;
      }
    }
    .item_right_box {
      display: flex;
      margin-left: 8px;
      flex-direction: column;
      justify-content: space-between;
      font-size: 13px;
      .item_name {
        word-break: break-all;
        line-height: 20px;
      }
      .item_price_count {
        display: flex;
        justify-content: space-between;
        text {
          font-size: 16px;
          letter-spacing: 0;
          color: #C00000;
        }
      }
      
    }
  }
</style>